<template>
	<view class="container">
		<!-- <view class="navi-bar" :style="navBarStyle">{{navBarText}}</view> -->
		<view class="page-content-warp">
			<Home class="page-com" :style="{ display: currentId === 'home' ? 'block' : 'none' }"/>
			<Account class="page-com" :style="{ display: currentId === 'account' ? 'block' : 'none' }"/>	
		</view>
		<view class="tabber-warp" :style="{ height: tabbarHeight + 'rpx' }">
			<Tabber class="tabber" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, toRefs } from 'vue';
	import Home from '../tabbar/home.vue'
	import Account from '../tabbar/account.vue'
	import Tabber from '@/components/tabbar.vue'
	import { useTabbarStore } from '@/store/tabbar'
	import { useState } from '@/utils/useUtils'
	
	const menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect()

	const tabbarStore = useTabbarStore()
	const [navBarText, setNavBarText] = useState('首页')
	const navBarStyle = computed(() => {
		return {
			height: menuButtonBoundingClientRect.bottom + 8 + 'px',
			paddingTop: menuButtonBoundingClientRect.top - 8 + 'px'
		} as Partial<CSSStyleDeclaration>
	})

	const { currentId, occupyHeight: tabbarHeight } = toRefs(tabbarStore)
	
	

	defineExpose({
		currentId,
		tabbarHeight,
		navBarText,
		navBarStyle
	})
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
	}

	.page-content-warp {
		overflow: hidden;
		flex: 1;
	}

	.tabber-warp {
		flex: none;
		width: 100vw;
	}

	.tabber {
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.page-com {
		height: 100%;
		width: 100%;
	}
	
	.navi-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		box-sizing: border-box;
		font-size: 13px;
	}
</style>